<template>
  <div class="dialog">
    <el-dialog
      :title="title"
      :visible.sync="visible"
      :close-on-click-modal="false"
      width="65%"
      top="20vh"
      @close="closeDialog"
    >
      <el-form
        :model="createForm"
        label-width="120px"
        label-suffix=":"
        class="searchw"
        ref="createForm"
        :rules="rule"
      >
       <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="图片" prop="carImage" class="pictu">
               <el-upload class="upload-demo" ref="upload" action list-type="picture" :file-list="fileList"
                  :on-change="fileChange" :disabled="!isupload " accept="png,jpg"
                  :before-remove="beforeRemove">
                  <img v-if="createForm.carImage" :src="createForm.carImage" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="车架号" prop="vin">
              <el-input
                v-model.trim="createForm.vin"
                placeholder="请输入车架号"
                :disabled="title == '车架号详情'"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="品牌名称" prop="letter">
              <el-input
                v-model.trim="createForm.letter"
                placeholder="请输入品牌名称"
                :disabled="title == '车架号详情'"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车系名称" prop="brandName">
             <el-input
                v-model.trim="createForm.brandName"
                placeholder="请输入车系名称"
                :disabled="title == '车架号详情'"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="车型名称" prop="carName">
              <el-input
                v-model.trim="createForm.carName"
                placeholder="请输入车型名称"
                :disabled="title == '车架号详情'"
              ></el-input>
            </el-form-item>
          </el-col>
           <el-col :span="8">
            <el-form-item label="年份" prop="years">
              <el-date-picker
                v-model.trim="createForm.years"
                type="year"
                value-format="yyyy"
                format="yyyy"
                placeholder="请选择年份"
                :disabled="title == '车架号详情'"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发动机" prop="engine">
              <el-input
                v-model.trim="createForm.engine"
                placeholder="请输入发动机"
                :disabled="title == '车架号详情'"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="前制动器" prop="frontBrake">
              <el-input
                v-model.trim="createForm.frontBrake"
                placeholder="请输入前制动器"
                :disabled="title == '车架号详情'"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="后制动器" prop="rearBrake">
              <el-input
                v-model.trim="createForm.rearBrake"
                placeholder="请输入后制动器"
                :disabled="title == '车架号详情'"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车身形式" prop="bodyForm">
              <el-input
                v-model.trim="createForm.bodyForm"
                placeholder="请输入车身形式"
                :disabled="title == '车架号详情'"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="驱动方式" prop="driveMethod">
              <el-input
                v-model.trim="createForm.driveMethod"
                placeholder="请输入驱动方式"
                :disabled="title == '车架号详情'"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="驻车制动" prop="parkingBrake">
              <el-input
                v-model.trim="createForm.parkingBrake"
                placeholder="请输入驻车制动"
                :disabled="title == '车架号详情'"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="变速器" prop="variator">
              <el-input
                v-model.trim="createForm.variator"
                placeholder="请输入变速器"
                :disabled="title == '车架号详情'"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="燃料" prop="fuel">
              <el-input
                v-model.trim="createForm.fuel"
                placeholder="请输入燃料"
                :disabled="title == '车架号详情'"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="功率" prop="power">
              <el-input
                v-model.trim="createForm.power"
                placeholder="请输入功率"
                :disabled="title == '车架号详情'"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="排量" prop="displacement">
              <el-input
                v-model.trim="createForm.displacement"
                placeholder="请输入排量"
                :disabled="title == '车架号详情'"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="生产商" prop="makeName">
              <el-input
                v-model.trim="createForm.makeName"
                placeholder="请输入生产商"
                :disabled="title == '车架号详情'"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">关 闭</el-button>
        <el-button
          type="primary"
          @click="confirmData('createForm')"
          v-if="title != '车架号详情'"
          >保 存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  uploadFile
} from '@/api/carLine'
export default {
  name: 'addBrand',
  props: {
    row: {
      type: Object,
      default: {}
    },
    title: {
      type: String,
      default: ''
    },
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      visible: true,
      fileList:[],
      isupload: true,
      createForm: {
        vin: '',
        letter:"",
        years: '',
        engine: '',
        displacement: '',
        frontBrake: '',
        rearBrake: '',
        bodyForm: '',
        driveMethod: '',
        parkingBrake: '',
        variator:"",
        fuel:"",
        power:""
      },
      rule:{
        vin: [
          { required: true, message: '请输入车架号', trigger: 'blur' },
        ],
        letter: [
          { required: true, message: '请输入品牌名称', trigger: 'blur' },
        ],
        brandName: [
          { required: true, message: '请输入车系名称', trigger: 'blur' },
        ],
        carName: [
          { required: true, message: '请输入车型名称', trigger: 'blur' },
        ],
        years: [
          { required: true, message: '请选择年份', trigger: 'change' },
        ],
        engine:[
          { required: true, message: '请输入发动机', trigger: 'blur' },
        ],
        displacement: [
          { required: true, message: '请输入排量', trigger: 'blur' },
        ],
        frontBrake: [
          { required: true, message: '请输入前制动器', trigger: 'blur' },
        ],
        rearBrake:[
          { required: true, message: '请输入后制动器', trigger: 'blur' },
        ],
        bodyForm: [
          { required: true, message: '请输入车身形式', trigger: 'blur' },
        ],
        driveMethod: [
          { required: true, message: '请输入驱动方式', trigger: 'blur' },
        ],
        parkingBrake:[
          { required: true, message: '请输入驻车制动', trigger: 'blur' },
        ],
        variator: [
          { required: true, message: '请输入变速器', trigger: 'blur' },
        ],
        fuel: [
          { required: true, message: '请输入燃料', trigger: 'blur' },
        ],
        power:[
          { required: true, message: '请输入功率', trigger: 'blur' },
        ]
      }
    }
  },
  created() {
    if(this.row.id){
      this.createForm = this.row
    }
  },
  mounted() {},
  methods: {
      /**
     *  上传头像
     */
    fileChange (file, fileList) {
      this.isupload = false;
      let data = new FormData();
      data.append("biz", 'material');
      data.append("file", fileList[0].raw);
        uploadFile(data)
          .then((res) => {
            if (res.data.code == 0) {
              this.createForm.carImage = res.data.data.remoteUrl;
              this.fileList = []
              this.isupload = true;
            } else {
              this.$openMessage(res.data.message, 'error');
              this.isupload = true;
            }
          })
          .catch((error) => {
            this.isupload = true;
          });
    },
    /**
     * 上传文件前
     */
    beforeRemove () {
      this.fileList = []
    },
    confirmData(formName) {
      this.$refs[formName].validate((valid) => {
        if(valid) {
          this.$emit('ok', this.createForm)
        }
      })
    },
    closeDialog() {
      this.$emit('cancle')
    }
  }
}
</script>
<style scoped lang="less">
.pictu {
    ::v-deep .el-upload--picture {
      width: 100px !important;
      height: 100px !important;
      line-height: 100px !important;
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
    }

    .avatar {
      width: 100px;
      height: 100px;
      display: block;
    }
  }
.dialog {
  .el-date-editor.el-input {
    width: 100% !important;
  }
}
</style>
